<template>
  <div class="user-big-box">
    <div class="search-box">
      <div class="options-box">
        <div class="option-left">
          <el-button
            type="primary"
            @click="requestData"
          >
            搜索
          </el-button>
          <el-button
            @click="initSearch"
          >
            重置
          </el-button>
          <el-button
            type="primary"
            @click="handleCreate"
          >
            新增
          </el-button>
        </div>
        <div class="option-right">
        </div>
      </div>
      <el-form :model="params">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="用户名">
              <el-input v-model="params.username" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="昵称">
              <el-input v-model="params.nickName" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table-big-box">
      <div class="table-box">
        <el-table
          :data="dataList"
          border
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="80"
          />
          <el-table-column
            align="center"
            label="用户ID"
            prop="id"
          />
          <el-table-column
            align="center"
            label="用户名"
            prop="username"
          />
          <el-table-column
            align="center"
            label="昵称"
            prop="nickName"
          />
          <el-table-column
            align="center"
            label="邮箱"
            prop="email"
          />
          <el-table-column
            align="center"
            label="状态"
            prop="status"
          >
            <template #default="scope">
              <el-tag type="danger" v-if="scope.row.status === 0">
                禁用
              </el-tag>
              <el-tag type="success" v-else-if="scope.row.status === 1">
                启用
              </el-tag>
              <el-tag type="danger" v-else>
                状态错误
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="角色"
            prop="roleList"
          >
            <template #default="scope">
              <el-tag v-for="item in scope.row.roleList">
                {{ item.name }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="创建时间"
            prop="createTime"
          />
          <el-table-column
            align="center"
            label="更新时间"
            prop="updateTime"
          />
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="200px"
          >
            <template #default="scope">
              <div class="options-box">
                <el-popconfirm
                  :title="`确定禁用用户：${scope.row.username} ？`"
                  @confirm="updateStatus(scope.row, 0)"
                >
                  <template #reference>
                    <el-link
                      v-if="scope.row.status"
                      type="danger"
                    >
                      禁用
                    </el-link>
                  </template>
                </el-popconfirm>
                <el-popconfirm
                  :title="`确定启用用户：${scope.row.username} ？`"
                  @confirm="updateStatus(scope.row, 1)"
                >
                  <template #reference>
                    <el-link
                      v-if="!scope.row.status"
                      type="primary"
                    >
                      禁用
                    </el-link>
                  </template>
                </el-popconfirm>
                <el-link
                  type="primary"
                  @click="handleUpdate(scope.row)"
                >
                  编辑
                </el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination
          v-model:current-page="page.current"
          v-model:page-size="page.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          size="default"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 引入组件 -->
    <Update
      :row="row"
      :show="showUpdate"
      @update:show="value => showUpdate = value"
      :type="type"
      @handleReturn="handleReturn"
    />
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {pageQueryUser, updateUser} from "@/service/UserController";
import {Page} from "@/types/Page";
import { ElMessage } from 'element-plus';
import Update from "./update/index.vue";

interface ParamsType {
  username?: string;
  nickName?: string;
}

const initParams: ParamsType = {
  username: undefined,
  nickName: undefined,
};

const params = ref<ParamsType>({
  ...initParams,
});
const dataList = ref<any[]>([]);
const page = ref<Page>({
  current: 1,
  pageSize: 10,
  total: 0,
});
const row = ref<any>({});
const showUpdate = ref<boolean>(false);
const type = ref<1 | 2>(1); // 1 新增 2 更新

onMounted(async () => {
  await requestData()
});

const initSearch = () => {
  params.value = {
    ...initParams,
  }
  requestData();
}

const requestData = async () => {
  const res = await pageQueryUser({
    current: page.value.current,
    pageSize: page.value.pageSize,
    ...params.value,
  });
  if (res.code === "000000") {
    const { current, pages, total, records } = res.data;
    dataList.value = records;
    page.value.current = current;
    page.value.total = total;
  }
}

const handleSizeChange = (value: number) => {
  page.value.pageSize = value;
  requestData();
}
const handleCurrentChange = (value: number) => {
  page.value.current = value;
  requestData();
}

const updateStatus = async (row: any, status: 0 | 1) => {
  const res = await updateUser({
    id: row.id,
    status,
  });
  if (res.code === "000000") {
    ElMessage.success("操作成功！");
    await requestData();
  }
}

const handleReturn = () => {
  showUpdate.value = false;
  requestData();
}

const handleUpdate = (record: any) => {
  row.value = record;
  type.value = 2;
  showUpdate.value = true;
}

const handleCreate = () => {
  row.value = {};
  type.value = 1;
  showUpdate.value = true;
}

</script>

<style scoped lang="less">
@import "./index.less";
</style>